import React, { Component } from 'react';

class Index extends Component {
	state = {
		isActive: false
	}
	render() {
		const { tabs, activeTabIndex, handleClickTab } = this.props
		const { isActive } = this.state
		return (
			<div className={isActive ? 'tab-sel active' : 'tab-sel'}>
				<p className="tab-item">
					{
						tabs.length > 0 && tabs.map((v, i) => {
							return (
								<b key={i} 
									className={ activeTabIndex === i ? 'active': '' }
									onClick={ () => handleClickTab(i) }
								>{v.title}</b>
							)
						})
					}

				</p>
				<p className="icon">
					{ isActive && <span>全部</span> } 
					<span onClick={() => this.setState({ isActive: !isActive })}>^</span>
				</p>
			</div>
		);
	}
}

export default Index;
